<template>
  <div>
    <search-bar @search="searchClick"></search-bar>
    <group>
      <cell title="待添加" link="waitToAddGWL">
        <img slot="icon" class="icon" src="../../../images/icon_yaoqing.png" alt="添加">
      </cell>
    </group>
    <group>
      <group-title slot="title">已添加
        <span style="float:right;" @click="editClick">{{ ifEdit ? '取消': '编辑'}}</span>
      </group-title>
      <div class="edit-box">
        <checklist v-if="ifEdit" class="edit_select" :options="checkOptions" v-model="playerids"></checklist>
        <div v-bind:class="{'edit-content': ifEdit}">
          <cell v-for="item in whiteList" :key="item.id" :title="item.nick" :inline-desc="item.id" value="已添加">
            <img slot="icon" class="icon" :src="item.figure || defaultIcon" alt="头像">
          </cell>
        </div>
      </div>
    </group>
    <div class="select_all" v-if="ifEdit">
      <checklist :options="selectAll" v-model="selectedAll">
      </checklist>
      <span class="select_number">选中{{playerids.length}}个</span>
      <button class="select_delete" @click="deleteClick">删除</button>
    </div>
  </div>
</template>
<script>
import SearchBar from "../../../components/common/SearchBar.vue";
import { Cell, Group, GroupTitle, Checklist } from "vux";
export default {
  data() {
    return {
      checkOptions: [],
      selectAll: ["全选"],
      ifEdit: false,
      whiteList: [],
      playerids: [],
      defaultIcon: require("../../../images/morentouxiang1.png")
    };
  },
  components: {
    SearchBar,
    Cell,
    Group,
    GroupTitle,
    Checklist
  },
  computed: {
    selectedAll: {
      get: function() {
        if (this.playerids.length === this.whiteList.length) {
          return ["全选"];
        }
        return [];
      },
      set: function(value) {
        if (value[0] == "全选") {
          this.playerids = this.whiteList.map(item => {
            return item.id;
          });
          return;
        }
        if (this.playerids.length == this.whiteList.length) {
          this.playerids = [];
        }
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.apiService.whiteuser.whiteuserlist().then(res => {
        this.whiteList = res.data.whiteuserlist;
        this.checkOptions = this.whiteList.map(item => {
          return {
            key: item.id,
            value: ""
          };
        });
      });
    },
    editClick() {
      this.ifEdit = !this.ifEdit;
    },
    searchClick(info) {
      let _this = this;
      this.apiService.user
        .getplayerinfo({
          playerid: info
        })
        .then(res => {
          this.$vux.confirm.show({
            title: "添加到自建房",
            content: `你确定将${res.data.nick}添加到自建房白名单中么？`,
            onConfirm() {
              _this.apiService.whiteuser
                .addwhiteuser({
                  playerids: [info]
                })
                .then(ress => {
                  let data = res.data;
                  _this.whiteList.push(data);
                });
            }
          });
        });
    },
    deleteClick() {
      let _this = this;
      this.$vux.confirm.show({
        title: "从白名单中删除",
        content: `您确定要删除选中的人么?`,
        onConfirm() {
          _this.apiService.whiteuser
            .deletewhiteuser({
              playerids: _this.playerids
            })
            .then(res => {
              _this.$vux.toast.text("删除成功!");
              _this.init();
            });
        }
      });
    }
  }
};
</script>
<style>
.edit_select .weui-cell {
  height: 1.15rem;
  padding: 0;
}
.edit_select .weui-cells_checkbox .weui-cell__hd {
  padding-left: 0.3em;
}
.edit-content .weui-cell {
  height: 1.15rem;
  padding: 0;
}
</style>

<style scoped>
.icon {
  height: 0.7rem;
  width: 0.7rem;
  margin-right: 0.23rem;
}
.edit-box {
  position: relative;
}

.edit-content {
  position: absolute;
  top: 0;
  left: 0.6rem;
  width: 86%;
}
.select_all {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.select_number,
.select_delete {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.select_number {
  right: 2rem;
}
.select_delete {
  right: 0;
  background-color: #047efc;
  color: #fff;
  font-size: 0.32rem;
  padding: 0.25rem 0.6rem;
}
</style>


